<template>
<view>
	<view class="group-box">
		<view class="navbar-box">
			<view class="box">
				<view class="li" :class="{'active':navfixIndex==0}" @click="navfix(0)">期货</view>
				<view class="li" :class="{'active':navfixIndex==1}" @click="navfix(1)">期权</view>
			</view>
		</view>
		<view class="hot-title">
			<view class="left">
				<view class="title-text">常用周期</view>
			</view>
			<view class="check">
				<text>按住拖动排序</text>
			</view>
		</view>
		<view class="tab-box">
			<view class="tab active">分时</view>
			<view class="tab" v-for="(i,idx) in 5">15分</view>
		</view>
	</view>	
	<view class="content">
		<view class="more">以下在“更多”展示，支持向上拖动</view>
		<view class="tab-box">
			<view class="tab" v-for="(i,idx) in 12">15分</view>
			<view class="tab add" @click="addispacket">+添加周期</view>
		</view>
	</view>
	
	<!-- 添加到分组 -->
	<view class="packet-modal" @touchmove.stop.prevent>
		<view class="shade" :hidden="!ispacket"></view>
		<view class="packet-box" :animation="animationData">
			<view class="caption">
				<text>添加到分组</text>
				<image @click="closeispacket" src="@/static/home/subpage/close.png"></image>
			</view>
			<view class="form-box">
				<view class="form-fix">
					<input type="text" class="ipt" placeholder-class="pipt" placeholder="请输入1-240分">
					<text>分</text>
				</view>
			</view>
			<view class="item-box">
				<view class="item" :class="{'active': index==0}" v-for="(item,index) in array">
					<image v-if="item=='del'" src="@/static/price/subprice/del.png"></image>
					<text v-else>{{item}}</text>
				</view>
				<view class="item active add">添加</view>
			</view>
		</view>	
	</view>
</view>
</template>

<script>
export default {
	data() {
		return {
			navfixIndex:0,
			animationData: {},
			animation1Data: {},
			ispacket: false,
			array:[
				'分','日','周','月',
				'1','2','3','del',
				'4','5','6','+',
				'7','8','9','-',
				'00','0','.',
			]
		};
	},
	onReady(){
		var animation = uni.createAnimation({
			duration: 500,
			timingFunction: 'ease',
		})
		this.animation =animation;
	},
	methods:{
		navfix(index){
			this.navfixIndex= index;
		},
		addispacket(){
			this.ispacket= true;
			this.animation.translateY(0).step();
			this.animationData = this.animation.export();
		},
		closeispacket(){
			this.ispacket= false;
			this.animation.translateY("100%").step();
			this.animationData = this.animation.export();
		},
	}
}
</script>

<style lang="scss">
page{
	background: #F4F5F7;
}
.tab-box{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	.tab{
		width: 218rpx;
		height: 88rpx;
		border-radius: 16rpx;
		border: 2rpx solid #F4F5F7;
		text-align: center;
		line-height: 88rpx;
		margin:24rpx 24rpx 0 0;
		font-size: 28rpx;
		color: rgba(0,0,0,0.8);
		box-sizing: border-box;
		background-color: #fff;
	}
	.tab.active{
		color: rgba(0,0,0,0.4);
	}
	.tab.add{
		color: #356FE5;
	}
	.tab:nth-child(3n){
		margin-right:0;
	}
}	
.group-box{
	padding:24rpx 20rpx 32rpx;
	background-color: #fff;
	.navbar-box{
		// padding:32rpx 24rpx 0;
		.box{
			display: flex;
			align-items: center;
			width: 100%;
			height: 80rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			padding:4rpx;
			box-sizing: border-box;
		}
		.li{
			font-size: 28rpx;
			color: rgba(0,0,0,0.4);
			flex:1;
			text-align: center;
			height:100%;
			line-height: 72rpx;
		}
		.li.active{
			background-color: #fff;
			font-weight: bold;
			color: rgba(0,0,0,0.8);
			border-radius: 16rpx;
		}
	}
	.hot-title{
		padding-bottom:26rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top:28rpx;
		.left{
			display: flex;
			align-items: center;
			.title-text{
				font-size: 32rpx;
				font-weight: bold;
				color: #000000;
				line-height: 46rpx;
			}
			& image{
				width:46rpx;height:46rpx;
			}
		}
		.check{
			display: flex;
			align-items: center;
			& image{
				width:46rpx;height:46rpx;
			}
			& text{
				font-size: 28rpx;
				color: #8E8E93;
			}
		}
	}
	.hot-title::after{
		content: '';
		position: absolute;
		left:0;bottom:0;
		width: 60rpx;
		height: 10rpx;
		background: linear-gradient(90deg, #FF3B30 0%, rgba(255,59,48,0) 100%);
	}
}
.content{
	padding:24rpx;
	.more{
		font-size: 28rpx;
		color: #8E8E93;
		line-height: 30rpx;
		text-align: center;
	}
}
.packet-modal{
	.packet-box{
		position: fixed;
		left:0;bottom:0;
		width:100%;
		box-sizing: border-box;
		transform: translateY(100%);
		z-index: 100;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0px 0px;
		overflow: hidden;
		.caption{
			height:114rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: rgba(0,0,0,0.8);
			position: relative;
			line-height: 114rpx;
			// border-bottom:2rpx solid #F6F7F9;
			& image{
				width: 96rpx;
				height: 96rpx;
				position: absolute;
				right:0;bottom:0;
			}
		}
		.form-box{
			padding:0 16rpx 8rpx;
			.form-fix{
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 88rpx;
				background: #F4F5F7;
				border-radius: 16rpx;
				padding:24rpx 24rpx 24rpx 32rpx;
				box-sizing: border-box;
				.ipt{
					font-size: 28rpx;
					color: rgba(0,0,0,0.8);
				}
				.pipt{
					color: #8E8E93;
				}
			}
			& text{
				font-size: 28rpx;
				color: #EE5953;
			}
		}
		.item-box{
			padding:0 0 24rpx 16rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.item{
				border:2rpx solid #F4F5F7;
				width: 168rpx;
				height: 92rpx;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 48rpx;
				font-weight: bold;
				color: rgba(0,0,0,0.8);
				box-sizing: border-box;
				margin:16rpx 16rpx 0 0;
				& image{
					width:48rpx;height:48rpx;
				}
			}
			.item:nth-child(4n){
				margin-right:0;
			}
			.item:nth-child(1),
			.item:nth-child(2),
			.item:nth-child(3),
			.item:nth-child(4){
				font-size: 28rpx;
				color: #EE5953;
			}
			.item.active{
				background: #EE5953;
				color:#fff;
				border:0;
			}
			.item.add{
				font-size: 28rpx;
				font-weight: 400;
			}
		}
	}
}
</style>
